<template>
  <el-card class="box-card">
    <div class="box_top">
      <p>普通用户账号管理</p>
      <!-- 搜索框 -->
      <el-input
        placeholder="搜索用户名"
        class="input-with-select"
        v-model.trim="userSearch"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
    <div class="box_container">
      <el-table
        border
        style="width: 100%"
        :data="commonUser.slice((pageUser - 1) * sizeUser, pageUser * sizeUser)"
      >
        <el-table-column
          align="center"
          label="序号"
          width="80"
          prop="user_id"
        />
        <el-table-column
          align="center"
          label="用户名"
          width="180"
          prop="user_name"
        />
        <el-table-column
          align="center"
          label="密码"
          width="146"
          prop="user_password"
        />
        <el-table-column
          align="center"
          label="用户类型"
          width="120"
          prop="user_type"
        />
        <el-table-column
          align="center"
          label="登录状态"
          width="180"
          prop="user_onlinestatus"
        >
          <template v-slot="scope1">
            <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-model="scope1.row.user_onlinestatus"
              active-text="在线"
              inactive-text="离线"
              :active-value="1"
              :inactive-value="0"
              @change="handleOnlinestatusChange(scope1.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="账号状态"
          width="180"
          prop="user_other"
        >
          <template v-slot="scope2">
            <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-model="scope2.row.user_other"
              active-text="激活"
              inactive-text="删除"
              :active-value="1"
              :inactive-value="0"
              @change="handleOtherChange(scope2.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template v-slot="Scoped">
            <el-button type="danger" @click="handleRise(Scoped.row.user_name)"
              ><el-icon><Top /></el-icon>升交管</el-button
            >
            <el-button
              type="success"
              @click="
                handleUpdata(Scoped.row.user_name, Scoped.row.user_password)
              "
              ><el-icon><EditPen /></el-icon>修改</el-button
            >
            <el-button type="warning" @click="handleExit(Scoped.row.user_name)"
              ><el-icon><SwitchButton /></el-icon>下线</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageUser"
        v-model:page-size="sizeUser"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commonUser.length"
        @size-change="handleSizeUser"
        @current-change="handleCurrentUser"
      />
      <!-- 修改密码 -->
      <el-dialog v-model="dialogTableVisible" title="修改密码">
        <el-form :model="newForm" :rules="FormRules" ref="FormUpdate">
          <el-form-item prop="username">
            <el-input
              v-model="newForm.username"
              placeholder="请输入想修改的账号"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入想修改的密码"
              v-model="newForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleUpdataPassword">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </el-card>
</template>

<script setup>
import {
  Position,
  Menu as IconMenu,
  UserFilled,
  Platform,
  Search,
  Plus,
  Top,
  SwitchButton,
  EditPen
} from "@element-plus/icons-vue"
import { onMounted, ref } from "vue"
import axios from "axios"
import { MyUser } from "./Hooks/MyUser"
const {
  user,
  commonUser,
  trafficUser,
  getFetchUsers,
  sizeUser,
  pageUser,
  handleSizeUser,
  handleCurrentUser,
  handleRise,
  handleUpdata,
  dialogTableVisible,
  newForm,
  FormRules,
  FormUpdate,
  handleUpdataPassword,
  handleExit,
  userSearch,
  handleOnlinestatusChange,
  handleOtherChange,
} = MyUser()
</script>

<style scoped>
.box-card {
  height: 660px;
}
.box_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.box_top p {
  font-size: 20px;
}
.el-input {
  width: 300px;
  height: 32px;
}

.box_container {
  height: 570px;
}
</style>
